<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单显示和隐藏</title>
		<style>
			.defaultMenu{
				width: 280px;
				height: 40px;
				background: #F90;
				border: none;
				line-height: 40px;
				padding: 0 10px;
				border-radius: 10px 10px 0 0;
			}
			.defaultMenu>ul{
				height: 0px;
				width: 350px;
				overflow: hidden;
				transition: all 2s linear;
				margin-top: -18px;
				margin-left: -50px;
				padding: ;
			}
			.defaultMenu>ul>li{
				list-style: none;
				background: darkgrey;
				width: 280px;
				height: 40px;
				line-height: 40px;
				border-top: 1px solid white;
				padding: 0 10px;
				border-bottom: 1px solid white;
				transition: all 2s linear;
			}
			.defaultMenu:hover ul{
				height: 175px;
			}
			.defaultMenu>ul>li:hover{
				color: white;
				background: black;
			}
		</style>
	</head>
	<body>
		<div class="defaultMenu"><h3>Menu</h3>
		    <ul>
				<li>HTML5+CSS3</li>
				<li>JavaScript</li>
				<li>JQuery</li>
				<li>Bootstrap</li>
			</ul>
		</div>
	</body>
</html>
